<template>
  <!--闪电下单-->
  <div style="height: 100%;border: #898C95 solid 1px;margin-left: 2px;">
    <div>
      <div class="title-box" v-if="Fkey1 == 1">
        <div>云条件单</div>
      </div>
      <div class="tabdiv" v-else>
        <div class="tabs">
          <div class="li-tab" v-for="(item, index) in tabsParam" :key="index" @click="toggleTabs(index)" :class="{ active: index == nowIndex }">
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
      <!-- Fkey1 == 1 是运条件单 -->
       <div class="transaction_in" v-if="Fkey1 == 1">
        <div class="transaction_in_right" :style="`height:${100 - navtopheight - 10}vh;`" style="
    overflow-y: auto;overflex-x:hidden;">
          <div>
            <div class="divTab">
              <div class="Twokey w350 Twokey-set">
                <span class="twokey_title">合约</span>
                <el-select class="" size="mini" @change="getPanelData" v-model="namesp" clearable placeholder="请选择">
                  <el-option
                    v-for="(item, inx) in ticket"
                    :key="inx"
                    :label="item.M + item.S + item.C"
                    :value="item.M + item.S + item.C">
                  </el-option>
                </el-select>

                <div class="twokey_right"></div>
              </div>

              <div class="Twokey w350 Twokey-set">
                <span class="twokey_title">下单类型</span>
                <el-select size="mini"  v-model="orderType"  placeholder="请选择">
                  <el-option
                    v-for="(item, inx) in orderTypeOpts"
                    :key="inx"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="Twokey w350 Twokey-set">
                <span class="twokey_title">委托价格</span>
                <el-input type="number" size="mini" v-model="toprice" :step="unit"/>
              </div>

              <div class="Twokey view flex-row w350 Twokey-set">
                <div class="twokey2_title">委托数量</div>
                <el-input class="twokey2_hands " v-model="Numberhand" type="number" name="number" value="1" min="1" size="mini"/>
                <div class="m-l-5">手</div>
              </div>

              <div class="Twokey view flex-row align-center Twokey-set">
                <div class="twokey2_title w80">触发价格</div>
                <div class="w80 m-r-5 select">
                  <el-select size="mini"  v-model="pricetype"  placeholder="请选择" class="width100">
                    <el-option
                      v-for="(item, inx) in cfPriceTypeOpts"
                      :key="inx"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="fuhao m-r-5 w70 ">
                    <el-select size="mini"  class="select" v-model="size"  placeholder="请选择">
                    <el-option
                      v-for="(item, inx) in fuhaoOpts"
                      :key="inx"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="w100">
                  <el-input size="mini" type="number" v-model="cfprice" min="0.01" :step="unit"/>
                </div>
              </div>

              <div class="Twokey view flex-row w350 Twokey-set">
                <div class="view flex-row align-center">
                    <div class="view flex-row">
                      <div class="twokey2_title">开平</div>
                      <el-radio-group v-model="buysale" class="view flex-row m-r-10">
                        <el-radio :label="'buy'" style="margin-right:10px;">开仓</el-radio>
                        <el-radio :label="'sale'">平仓</el-radio>
                      </el-radio-group>
                    </div>

                    <div class="w100">
                      <el-select size="mini"  class="select" v-model="vtype"  placeholder="有效期">
                        <el-option
                          label="当日有效"
                          :value="'0'">
                        </el-option>
                        <el-option
                          label="永久有效"
                          :value="'1'">
                        </el-option>
                      </el-select>
                    </div>
                </div>
              </div>


            </div>

            <div>
                <div class="Business view flex-row width100">
                    <div class="Business_left flex-1" @click="doOrderTrand('rise')">
                      <span class="Business_left_font1">{{ selldis || '- - ' }}</span>
                      <div class="Business_left_bor"></div>
                      <span class="Business_left_font1">买&nbsp;入</span>
                    </div>

                    <div class="Business_right flex-1 " @click="doOrderTrand('fall')">
                      <span class="Business_left_font2">{{ buydis || '- - ' }}</span>
                      <div class="Business_left_bor2"></div>
                      <span class="Business_left_font2">卖&nbsp;出</span>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>

      <div class="transaction_in" v-else :style="`height:${100 - navtopheight - 10}vh;`" style="
    overflow-y: auto;">
        <div class="transaction_in_right">
          <div>
            <div class="divTab" v-show="nowIndex === 0" >
              <div class="Twokey w350">
                <span class="twokey_title">合约</span>
                <el-select class="" size="mini" @change="getPanelData" v-model="namesp" clearable placeholder="请选择">
                  <el-option
                    v-for="(item, inx) in ticket"
                    :key="inx"
                    :label="item.M + item.S + item.C"
                    :value="item.M + item.S + item.C">
                  </el-option>
                </el-select>

                <div class="twokey_right"></div>
              </div>
              <div class="Twokey_divin view">
                 <div class="Twokey view flex-row w350">
                    <div class="twokey2_title">数量</div>
                    <el-input class="twokey2_hands " v-model="Numberhand" type="number" name="number" value="1" min="1" size="mini"/>
                    <div class="m-l-5">手</div>
                  </div>
                  
                <div class="view flex-row align-center">
                    <div>
                      <div class="view flex-row m-l-135">
                        <span style="color:#FF0000;">买:</span>
                        <span style="color: #000;">可开 {{ buyopennum || 0}}  </span>
                        <span>可平 {{ buyclosenum || 0}}</span>
                      </div>
                      <div class="view flex-row m-l-135">
                        <span style="color: #228B22;">卖:</span>
                        <span style="color: #000;">可开  {{ saleopennum || 0}} </span>
                        <span style="color: #000;">可平 {{ saleclosenum || 0}}</span>
                      </div>
                    </div>
                    

                   <div class="Twokey_isn_right">
                      <div class="reset1" @click="fuwei"><span>复 位</span></div>
                    </div>
                </div>

                    
                  <div class="Twokey view flex-row">
                    <div class="m-l-20 fz-12 w50">价格： </div>
                    <!-- <el-autocomplete
                        class="inline-input"
                        autocomplete='off'
                        v-model="priceTxt"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择价格"
                        @select="handleSelect"
                      ></el-autocomplete> -->
                    <el-select v-model="priceTxt" placeholder="请选择">
                      <el-option
                        v-for="(item,index) in pricechoose"
                        :key="index"
                        :label="item.value"
                        :value="item.value">
                      </el-option>
                    </el-select>
                   
                  </div>
               
                  <div style="display: flex;justify-content: flex-start;width: 100%;" class="view m-t-5">
                   

                    <div class="Business view flex-row width100">
                      <div class="Business_left flex-1" @click="btnlist && business(selldis)">
                        <span class="Business_left_font1">{{ selldis || '- - ' }}</span>
                        <div class="Business_left_bor"></div>
                        <span class="Business_left_font1">买&nbsp;入</span>
                      </div>
                      <div class="Business_right flex-1" @click="btnlist && selldiss(buydis)">
                        <span class="Business_left_font2">{{ buydis || '- - ' }}</span>
                        <div class="Business_left_bor2"></div>
                        <span class="Business_left_font2">卖&nbsp;出</span>
                      </div>
                    </div>
                    
                  </div>
              </div>
            </div>

            <!-- 三建下单 -->
            <div class="divTab" v-show="nowIndex === 1" >
              <div class="Twokey w350">
                <span class="twokey_title">合约</span>
                <el-select  size="mini" @change="getPanelData" v-model="namesp" clearable placeholder="请选择">
                  <el-option
                    v-for="(item, inx) in ticket"
                    :key="inx"
                    :label="item.M + item.S + item.C"
                    :value="item.M + item.S + item.C">
                  </el-option>
                </el-select>

                <div class="twokey_right"></div>
              </div>
              <div class="Twokey_divin view">
                 <div class="Twokey view flex-row w350">
                    <div class="twokey2_title">数量</div>
                    <el-input class="twokey2_hands " v-model="Numberhand" type="number" name="number" value="1" min="1" size="mini"/>
                    <div class="m-l-5">手</div>
                  </div>
                  
                  <div class="view flex-row">
                      <div>
                        <div class="view flex-row m-l-135">
                            <span style="color:#FF0000;">买:</span>
                            <span style="color: #000;">可开  {{ buyopennum || 0}}  </span>
                            <span>可平 {{ saleclosenum || 0}}</span>
                        </div>

                        <div class="view flex-row m-l-135">
                          <span style="color: #228B22;">卖:</span>
                          <span style="color: #000;">可开  {{ buyopennum || 0}} </span>
                          <span style="color: #000;">可平 {{ saleclosenum || 0}}</span>
                        </div>
                      </div>

                      <div class="Twokey_isn_right">
                        <div class="reset1" @click="fuwei"><span>复 位</span></div>
                      </div>
                  </div>

                  <div class="Twokey view flex-row">
                    <div class="m-l-20 fz-12 w50">价格： </div>
                     <el-select v-model="priceTxt" placeholder="请选择">
                      <el-option
                        v-for="(item,index) in pricechoose"
                        :key="index"
                        :label="item.value"
                        :value="item.value">
                      </el-option>
                    </el-select>
                   
                  </div>
               
                  <div style="display: flex;justify-content: flex-start;width: 100%;" class="view m-t-15">
                    

                    <div class="Business view flex-row width100">
                      <div class="Business_left flex-1" @click="btnlist && business(selldis)">
                        <span class="Business_left_font1">{{ selldis || '- - ' }}</span>
                        <div class="Business_left_bor"></div>
                        <span class="Business_left_font1">买&nbsp;入</span>
                      </div>
                      <div class="Business_right flex-1 " @click="btnlist && selldiss(buydis)">
                        <span class="Business_left_font2">{{ buydis || '- - ' }}</span>
                        <div class="Business_left_bor2"></div>
                        <span class="Business_left_font2">卖&nbsp;出</span>
                      </div>

                       <div class="Business_right2 flex-1" @click="btnlist && closeposition()">
                        <span class="Business_left_font3">{{ Numberhand }}手</span>
                        <div class="Business_left_bor1"></div>
                        <span class="Business_left_font3">平&nbsp;仓</span>
                      </div>

                    </div>
                    
                  </div>
              </div>
            </div>


            <!-- 传统下单 -->
            <div class="divTab" v-show="nowIndex === 2" >
                <div class="Twokey w350">
                <span class="twokey_title">合约</span>
                <el-select class="" size="mini" @change="getPanelData" v-model="namesp" clearable placeholder="请选择">
                  <el-option
                    v-for="(item, inx) in ticket"
                    :key="inx"
                    :label="item.M + item.S + item.C"
                    :value="item.M + item.S + item.C">
                  </el-option>
                </el-select>

                <div class="twokey_right"></div>
              </div>
              <div class="Twokey_divin view">
                 <div class="Twokey view flex-row w350" style="height:20px;">
                    <div class="twokey2_title">方向</div>
                    <el-radio-group v-model="rise_fall">
                      <el-radio :label="'rise'">买入</el-radio>
                      <el-radio :label="'fall'">卖出</el-radio>
                    </el-radio-group>
                  </div>
                  
                  <div class="Twokey view flex-row w350" style="height:20px;">
                    <div class="twokey2_title">开平</div>
                    <el-radio-group v-model="buysale">
                      <el-radio :label="'buy'">开仓</el-radio>
                      <el-radio :label="'sale'">平仓</el-radio>
                    </el-radio-group>
                  </div>

                  <div class="Twokey view flex-row w350">
                    <div class="twokey2_title">数量</div>
                    <el-input class="twokey2_hands " v-model="Numberhand" type="number" name="number" value="1" min="1" size="mini"/>
                    <div class="m-l-5">手</div>
                  </div>
                  <div class="view flex-row">
                    <div>
                      <div class="view flex-row m-l-115">
                        <span style="color:#FF0000;">买:</span>
                        <span style="color: #000;">可开  {{ buyopennum || 0}}   </span>
                        <span>可平 {{ buyclosenum || 0}}</span>
                      </div>
                      <div class="view flex-row m-l-115">
                        <span style="color: #228B22;">卖:</span>
                        <span style="color: #000;">可开  {{ saleopennum || 0}} </span>
                        <span style="color: #000;">可平 {{ saleclosenum || 0}}</span>
                      </div>
                    </div>
                    <div class="Twokey_isn_right m-r-30">
                      <div class="reset1" @click="fuwei"><span>复 位</span></div>
                    </div>
                  </div>
                  
                  <div class="Twokey view flex-row">
                    <div class="m-l-20 fz-12 w50">价格： </div>
                    <!-- <el-autocomplete
                        class="inline-input"
                        v-model="priceTxt"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择价格"
                        @select="handleSelect"
                      ></el-autocomplete> -->
                    <el-select v-model="priceTxt" placeholder="请选择">
                      <el-option
                        v-for="(item,index) in pricechoose"
                        :key="index"
                        :label="item.value"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>

               
                  <div  class="view flex-row align-center justify-start m-t-5">

                    <div class="width100 p-l-15 p-r-15">
                       <el-button type="danger" class="width100"  @click="dochuantong">下单</el-button>
                    </div>
                  </div>
              </div>

            </div>
          </div>
        </div>
      </div>

     
    </div>
  </div>
</template>

<script>
import three from '@/components/foot/three.vue'; //三键
import tradition from '@/components/foot/tradition.vue'; //传统
import { mapState } from 'vuex';
import moment from 'moment'
export default {
  props: {
     Fkey1: {
       type: Number,
       default: 0
     }
  },
  computed: mapState({
    hoidlist: state => state.hoidlist,
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist, /* 全部合约代码 */
    navtopheight: state => state.navtopheight,
  }),
  watch: {
    ticket(val) {
      if (this.priceprict == true) {
        const itemData = val.find(item => (item.M + item.S + item.C) == this.namesp)
        if (itemData && itemData.S1) {
          this.selldis = itemData.S1
          this.buydis = itemData.B1
        }
        
      }
    },
    select: {
      handler: function(val) {
          this.namesp = val;
          this.getKaiPin(this.namesp)
          if (this.ticket && this.ticket.length > 0) {
            const itemData = this.ticket.find(item => (item.M + item.S + item.C) == this.namesp)
            if (itemData) {
              this.unit = itemData.unit
              // this.priceTxt = String(itemData.S1)
              this.toprice = itemData.S1
              this.cfprice = itemData.S1
              
            }
          }
　　　　},
      immediate: true,
　　　 deep:true
    }
  },

  data() {
    return {
      effective: 1,
      unit: 1,
      effectiveOpts: [
        {
          label: '当日有效',
          value: 1
        },
        {
          label: '永久有效',
          value: 2
        }
      ],
      cfprice: 0, // 触发价格
      toprice: '', // 委托价格
      orderType: 1,
      pricetype: 1,
      fuhao: 1,
      size: 'big',
      fuhaoOpts: [
        {
          value: 'big',
          label: '>='
        },
        {
          value: 'small',
          label: '<='
        },
      ], // >= <=
      cfPriceTypeOpts: [
        {
          value: 1,
          label: '最新价'
        },
        {
          value: 2,
          label: '买价'
        },
        {
          value: 3,
          label: '卖价'
        }
      ],// 触发价格
      orderTypeOpts: [
        {
          value: 1,
          label: '市价'
        },
        {
          value: 2,
          label: '限价'
        }
      ],
      cmd: 'now',
      btnlist: true,
      flat: '',
      gold: '',
      priceType: 1,
      priceTxt: '对手价',
      pricechoose: [
        {
          value: '对手价',
          val: 1
        }
        /*, {
          value: '排队价',
          val: 2
        }, {
          value: '市价',
          val: 3
        }, {
          value: '最新价',
          val: 4
        }, {
          value: '超价',
          val: 5
        }*/
      ],
      list: [], //合约名称
      rise_fall: 'rise', // 方向
      buysale: 'buy', // 开平
      oneitem: {},
      tabsParam: ['闪电下单', '三键下单', '传统下单'],
      nowIndex: 0,
      saleclosenum: '',
      saleopennum: '',
      buyclosenum: '',
      buyopennum: '',
      vtype: '0',
      namesp: '', //合约
      radioVal: '1', //开仓类型
      Numberhand: 1, //手数
      price: '', //价格
      priceprict: true, //买卖价格变动
      typename: '', //投机类型
      selldis: '', //卖价
      buydis: '', //买家
      profit_price: 0 /* 止盈价格 */,
      loss_price: 0 /* 止损价格 */,
      radio1: '',
      code: '', // 合约编码
      // disscond: false, //条件单
    };
  },
  components: { three, tradition },
  created: function() {
  },
  mounted() {
  },
  methods: {
    getKaiPin(contract) {
      this.$post('/user/getUserlimit', {contract}).then(res => {
        this.saleclosenum = res.data.saleclosenum
        this.saleopennum = res.data.saleopennum
        this.buyclosenum = res.data.buyclosenum
        this.buyopennum = res.data.buyopennum
      });
      
    },
    // 条件单下单
     doOrderTrand(rise_fall) {
      if (this.Numberhand == '') {
        this.btnlist = true;
        return this.$notify.error('请输入手数');
      }
      var buylist = {
          symbol_id: this.namesp,
          toprice: this.toprice,
          cmd: this.cmd,
          cfprice: this.cfprice,
          size: this.size,
          vtype: this.vtype,
          ticket: new Date().getTime() / 1000,
          price: this.rise_fall == 'rise' ?this.selldis : this.buydis ,
          rise_fall: rise_fall,
          buysale: this.buysale,
          pricetype: this.pricetype,
          volume: this.Numberhand,
        };
      var that = this;
      if (this.$store.state.setting.tishi == 1) {
          this.$layer.open({
              content: '确定创建条件单--' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
              btn: ['确定', '取消'],
              shadeClose: false, 
              yes: function(index, layero) {
                //按钮【按钮一】的回调
                that.$post('order/taskorder', buylist).then(res => {
                    that.$layer.closeAll();
                    if (res.code == 1) {
                      that.$notify.success(res.msg);
                      that.$emit('business', 1)
                      that.getusermouny()
                    } else {
                      that.$notify.error(res.msg);
                    }
                  });
              },
              btn2: function(index, layero) {
                that.$layer.closeAll();
              },
              cancel: function() {
                that.$layer.closeAll();
              }
            });
      } else {
        that.$post('order/taskorder', buylist).then(res => {
          that.$layer.closeAll();
          if (res.code == 1) {
            that.$notify.success(res.msg);
            that.$emit('business', 1)
            that.getusermouny()
          } else {
            that.$notify.error(res.msg);
          }
        });
      }
      
    },
    handleSelect(item) {
      this.priceType = item.val
    },
    querySearch(queryString, cb) {
      cb(this.pricechoose);
    },
    getusermouny() {
      this.$post('user/getUserinfo', {}).then(res => {
         this.$store.commit('set',{userInfo:res.data});
      });
    },
    getPanelData() {   
      const itemData = this.ticket.find(item => (item.M + item.S + item.C) == this.namesp)
      this.selldis = itemData.S1
      this.toprice = itemData.S1
      this.buydis = itemData.B1
      if (this.priceTxt != 1 || this.priceTxt != 2 || this.priceTxt != 3 || this.priceTxt != 4 || this.priceTxt != 5) {
       // this.priceTxt = String(itemData.S1)
      }
      if (this.Fkey1 == 1) {
          this.cfprice = itemData.S1
      }
      this.getKaiPin(this.namesp)
    },
    fuwei() {
      this.Numberhand = 1
      this.priceprict = true
    },
    //切换
    toggleTabs(index) {
      this.nowIndex = index;
      if (this.nowIndex == 0) {
        this.cmd = 'now'
      } else if (this.nowIndex == 1) {
        this.cmd = 'third'
      } else {
        const itemData = this.ticket.find(item => (item.M + item.S + item.C) == this.namesp)
        if (itemData) {
          this.toprice = itemData.S1
          // this.priceTxt = String(itemData.S1)

          this.toprice = itemData.S1
          this.cfprice = itemData.S1
        }
        
        this.cmd = 'tra'
      }
       
    },
    /* 价格输入方式切换 */
    changeprice() {
      this.priceprict = false;
    },
    /* 切换select*/
    changeslect(code) {
      this.priceprict = true;
      for (let i = 0; i < this.list.length; i++) {
        if (code == this.list[i].name_code) {
          return this.$store.commit('trade/select', this.list[i]);
        }
      }
    },
    //三键平仓
    closeposition() {
      if (this.hoidlist == null || this.hoidlist == '') {
        return this.$notify.error('请选择要平仓的订单');
      }
      this.$post('order/saleorder', { symbol_id: this.hoidlist.contract,rise_fall:this.hoidlist.risefall, volume: this.Numberhand,  }).then(res => {
        if (res.code == 1) {
          this.$emit('business', 0)
          this.getusermouny()
          this.$notify.success(res.msg || '平仓成功');
        } else {
          this.$notify.error(res.msg || '开仓失败');
        }
      });
    },
    // 传统
    dochuantong() {
      if (this.buysale == 'sale') {
        this.closeposition()
      } else {
        if (this.Numberhand == '') {
          this.btnlist = true;
          return this.$notify.error('请输入手数');
        }
        var buylist = {
            symbol_id: this.namesp,
            cmd: this.cmd,
            price: this.rise_fall == 'rise' ?this.selldis : this.buydis ,
            ticket: new Date().getTime() / 1000,
            pricetype: this.priceTxt,
            rise_fall: this.rise_fall,
            volume: this.Numberhand,
          };
        var that = this;
        if (this.$store.state.setting.tishi == 1) { 
            this.$layer.open({
                content: '确定下单--' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
                btn: ['确定', '取消'],
                shadeClose: false, 
                yes: function(index, layero) {
                  //按钮【按钮一】的回调
                  that.$post('order/openstock', buylist).then(res => {
                      that.$layer.closeAll();
                      if (res.code == 1) {
                        that.$notify.success(res.msg);
                        var p = that.price
                        that.$notify({
                          title: res.msg,
                          dangerouslyUseHTMLString: true,
                          message: `<div style="margin-bottom:10px;">下单价格：${p}</div>
                                    <div style="margin-bottom:10px;">方向：${that.rise_fall == 'rise' ?'买':'卖'}</div>
                                    <div style="margin-bottom:10px;">手数：${that.Numberhand}</div>
                                    <div style="margin-bottom:10px;">时间： ${moment().format('YYYY-MM-DD HH:mm:ss')}</div>
                                    `
                                    ,
                          position: 'bottom-right'
                        });
                        that.$emit('business', 0)
                        that.getusermouny()
                      } else {
                        that.$notify.error(res.msg);
                      }
                    });
                },
                btn2: function(index, layero) {
                  that.$layer.closeAll();
                },
                cancel: function() {
                  that.$layer.closeAll();
                }
              });
        } else {
            that.$post('order/openstock', buylist).then(res => {
              that.$layer.closeAll();
              if (res.code == 1) {
                that.$notify.success(res.msg);
                that.$emit('business', 0)
                that.getusermouny()
              } else {
                that.$notify.error(res.msg);
              }
            });
        }
        
      }
      
    },
    //买入
    business(num) {
      this.btnlist = false;
      if (this.Numberhand == '') {
        this.btnlist = true;
        return this.$notify.error('请输入手数');
      }
      var buylist = {
          symbol_id: this.namesp,
          cmd: this.cmd,
          price: this.selldis,
          ticket: new Date().getTime() / 1000,
          rise_fall: 'rise',
          pricetype: this.pricetype,
          volume: this.Numberhand,
          stop_profit_price: this.profit_price /* 止盈价格 */,
          stop_loss_price: this.loss_price /* 止损价格 */
        };
      var that = this;
      var bool = false;
      if (this.$store.state.setting.tishi == 1) {
        this.$layer.open({
          content: '确定买入' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
          btn: ['确定', '取消'],
          shadeClose: false, 
          yes: function(index, layero) {
            //按钮【按钮一】的回调
            if (!bool) {
              bool = true;

              that.$post('order/openstock', buylist).then(res => {
                // console.log(res);
                that.$layer.closeAll();
                that.btnlist = true;
                bool = false;
                if (res.code == 1) {
                  let s = that.selldis
                  that.getusermouny()
                  that.$notify.success(res.msg || '开仓成功');
                  that.$notify({
                      title: res.msg,
                      dangerouslyUseHTMLString: true,
                      message: `<div style="margin-bottom:10px;">下单价格：${s}</div>
                                <div style="margin-bottom:10px;">方向：买</div>
                                <div style="margin-bottom:10px;">手数：${that.Numberhand}</div>
                                <div style="margin-bottom:10px;">时间： ${moment().format('YYYY-MM-DD HH:mm:ss')}</div>
                                `
                                ,
                      position: 'bottom-right'
                    });
                  that.$emit('business', 0)
                } else {
                  that.$notify.error(res.msg || '开仓失败');
                }
              });
            }
          },
          btn2: function(index, layero) {
            that.$layer.closeAll();
            that.btnlist = true;
            that.$layer.msg('已取消');
          },
          cancel: function() {
            //右上角关闭回调
            that.btnlist = true;
            that.$layer.closeAll();
            that.$layer.msg('已取消');
            //return false 开启该代码可禁止点击该按钮关闭
          }
        });
      } else {
        that.$post('order/openstock', buylist).then(res => {
                // console.log(res);
                that.$layer.closeAll();
                that.btnlist = true;
                bool = false;
                if (res.code == 1) {
                  that.getusermouny()
                  that.$notify.success(res.msg || '开仓成功');
                  that.$emit('business', 0)
                } else {
                  that.$notify.error(res.msg || '开仓失败');
                }
              });
      }
      
    },
    /* 卖出 */
    selldiss(num) {
      this.btnlist = false;
      if (this.Numberhand == '') {
        this.btnlist = true;
        return this.$notify.error('请输入手数');
      }
      var buylist = {
          symbol_id: this.namesp,
          cmd: this.cmd,
          rise_fall: 'fall',
          price: this.buydis,
          ticket: new Date().getTime() / 1000,
          pricetype: this.pricetype,
          // price: num,
          volume: this.Numberhand,
          stop_profit_price: this.profit_price /* 止盈价格 */,
          stop_loss_price: this.loss_price /* 止损价格 */
        };
      var that = this;
      var bool = false;
      if (this.$store.state.setting.tishi == 1) {
          this.$layer.open({
            content: '确定卖出' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
            btn: ['确定', '取消'],
            shadeClose: false, 
            yes: function(index, layero) {
              //按钮【按钮一】的回调
              that.$post('order/openstock', buylist).then(res => {
                  // console.log(res);
                  that.$layer.closeAll();
                  that.getusermouny()
                  that.$emit('business', 0)
                  that.btnlist = true;
                  if (res.code == 1) {
                    that.$notify.success(res.msg || '开仓成功');
                    let s = that.buydis
                     that.$notify({
                      title: res.msg,
                      dangerouslyUseHTMLString: true,
                      message: `<div style="margin-bottom:10px;">下单价格：${s}</div>
                                <div style="margin-bottom:10px;">方向：卖</div>
                                <div style="margin-bottom:10px;">手数：${that.Numberhand}</div>
                                <div style="margin-bottom:10px;">时间： ${moment().format('YYYY-MM-DD HH:mm:ss')}</div>
                                `
                                ,
                      position: 'bottom-right'
                    });
                  } else {
                    that.$notify.error(res.msg || '开仓失败');
                  }
                });
            },
            btn2: function(index, layero) {
              that.$layer.closeAll();
              that.btnlist = true;
              that.$notify({
                type: 'info',
                message: '已取消购买'
              });
            },
            cancel: function() {
              //右上角关闭回调
              that.btnlist = true;
              that.$layer.closeAll();
              that.$layer.msg('已取消');
              //return false 开启该代码可禁止点击该按钮关闭
            }
          });
      } else {
        that.$post('order/openstock', buylist).then(res => {
            // console.log(res);
            that.$layer.closeAll();
            that.getusermouny()
            that.$emit('business', 0)
            that.btnlist = true;
            if (res.code == 1) {
              that.$notify.success(res.msg || '开仓成功');
            } else {
              that.$notify.error(res.msg || '开仓失败');
            }
          });
      }
      
    }
  }
};
</script>
<style scoped lang="less">
.Twokey-set {
  height: 40px !important;
}
.tabs {
  height: 23px;
  color: #333333;
  display: flex;
  justify-content: flex-start;
}

.li-tab {
  cursor: pointer;
  width: 100%;
  height: 100%;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  background-image: linear-gradient(to bottom, #f2f2f2, #ececec, #d1d1d1, #cfcfcf);
}

.divTab {
  width: 100%;
}

.active {
  background: #ffffff;
  color: #333333;
  border-bottom: none;
}
.title-box {
    height: 30px;
    line-height: 30px;
    padding-left: 17px;
    border-bottom: 1px solid #eee;
}
.Twokey {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.Business_right2 {
  cursor: pointer;
  width: 105px;
  height: 70px;
  background-image: linear-gradient(to bottom, #ffffff, #f9f9f6, #f1f1eb);
  border-radius: 3px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: #003c74 solid 1px;
}
.twokey_title {
  font-size: 12px;
  color: #333333;
  margin-left: 5%;
  margin-right: 16px;
}

.Twokey_divin {
  width: 100%;
  min-height: 320px;
}
.Twokey2 {
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.twokey2_title,.twokey_title {
  font-size: 12px;
  color: #333333;
  margin-left: 5%;
  margin-right: 16px;
  width: 50px;
}

/deep/.el-input {width:auto !important;}
/deep/.el-input__inner {width: 100% !important;}
.twokey_inp {
  width: 50%;
  height: 23px;
}
 /deep/.select {
    .el-input {
    width: 100% !important;
  }
  input {
    width: 100% !important;
  }
  }
.twokey_right {
  width: 4px;
  height: 23px;
  /* background-color: #BBBBBB; */
  /* border: #999999 solid 1px; */
  margin-left: 8px;
}

.radiodiv {
  padding-left: 16px;
  box-sizing: border-box;
  font-size: 12px;
  display: flex;
  text-justify: flex-start;
  align-items: center;
}
.Business_left_font3 {
  color: #dda610;
  font-size: 16px;
  font-weight: bold;
}
.Business_left_bor1 {
  width: 85px;
  height: 1px;
  background-color: #808080;
  margin-top: 3px;
  /* margin-bottom: 0.3rem; */
}
.radiodiv_Purchase {
  color: #e15546;
  margin-left: 46px;
}

.radiodiv_Sellout {
  color: #3f9e0e;
}
.twokey_handa {
  width: 20%;
  height: 23px;
  border-radius: 2px;
  padding-left: 5px;
}
.twokey_hands {
  width: 40%;
  height: 23px;
  border-radius: 2px;
  padding-left: 5px;
}

.Twokey_in {
  width: 100%;
}

.Business {
  height: 65px;
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  padding-right: 15px;
  box-sizing: border-box;
}

.Business_left {
  height: 70px;
  background-image: linear-gradient(to bottom, #ffffff, #f9f9f6, #f1f1eb);
  border-radius: 3px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: #003c74 solid 1px;
  font-weight: bold;
  cursor: pointer;
}

.Business_right {
  width: 105px;
  height: 70px;
  border-radius: 3px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(to bottom, #ffffff, #f9f9f6, #f1f1eb);
  border: #003c74 solid 1px;
  font-weight: bold;
  cursor: pointer;
}

.Business_left_bor {
  width: 70px;
  height: 1px;
  background-color: #808080;
  margin-top: 3px;
}
.Business_left_bor2 {
  width: 70px;
  height: 1px;
  background-color: #808080;
  margin-top: 3px;
}

.Business_left_font1 {
  color: #bd0909;
  font-size: 18px;
  font-weight: bold;
}
.Business_left_font2 {
  color: #088a02;
  font-size: 18px;
  font-weight: bold;
}



.isn_right_mai {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  padding-left: 16px;
  box-sizing: border-box;
  align-items: center;
}

.isn_right_mai_left {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e15546;
  margin-right: 8px;
}

.isn_right_mai_rissght {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3f9e0e;
  margin-right: 8px;
}

.isn_right_mai_right {
  width: 80px;
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  color: #333333;
  font-size: 12px;
}

.reset1 {
  cursor: pointer;
  width: 65px;
  height: 25px;
  border: #003c74 solid 1px;
  background-image: linear-gradient(to bottom, #fefefe, #f6f6f2, #e2dfd6);
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-size: 12px;
  border-radius: 5px;
}
.reset {
  width: 50%;
  height: 25px;
  border: #003c74 solid 1px;
  background-image: linear-gradient(to bottom, #fefefe, #f6f6f2, #e2dfd6);
  margin-left: 8px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-size: 12px;
  border-radius: 5px;
}
/*条件单*/
.stoppo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-color: red; */
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}
</style>
